<template>
  <div class="index">
    <heads title="地址簿" :LeftArrow="true"></heads>
    <div class="main-content">
      <!-- 地址 -->
      <!-- default-tag-text="默认" -->
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        add-button-text="添加新地址"
        @add="onAdd"
        @edit="onEdit"
        @click-item="selectItem"
      />

      <!-- end -->
      <!-- button -->
    </div>
    <!-- end -->
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";


export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve)
  },
  data() {
    return {
      chosenAddressId: "1",
      list: [
        // {
        //   id: "1",
        //   name: "张三",
        //   tel: "13000000000",
        //   address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
        //   isDefault: true        
        // },
      
      ]
    };
  },
 computed: {
    ...mapState(["currentAdress"])
  },

  methods: {
    //添加新地址
    onAdd() {
      this.$router.push({
            path:'/adressEdit',query:{
        page:'send'}

    })
    },
    //编辑地址
    onEdit(item, index,e) {
        this.$router.push({
            path:`/adressEdit`,
            query:{
              id:item.id,
              options:JSON.stringify(item)
            }

        })
      
    },
    selectItem(item,index){

     
     if(this.$route.query.page === 'send'){
this.$store.commit('saveCurrentAdress',item)
 setTimeout(() => {
       this.$router.push({
         path:'/send',
         query:{
           address:JSON.stringify(item)
         }
       })
     },500)
     }
    
    // this.$router.go(-1)

    },
     //获取地址列表
    getData() {
      let _this = this;
     
       this.$ajax
            .post(`${this.$baseUrl}/user/address`)
            .then(function(res) {
              if (res.data.code == 200) {
                let _data = res.data.data;
                _data.map((item,index) => {
             
                  // item.isDefault = item.default === 1 ? true : false
                  item.tel = item.phone;
                  item.address = `${ item.province }${ item.city }${ item.town }${ item.desc }`   

                })
                _this.$forceUpdate()
                console.log(_data)
                
                _this.list = _data;
                _this.$forceUpdate()


              }
            })
            .catch(function(error) {
              console.log(error);
      });
      
    },
  },
  created() {
    this.getData();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.main-content {
  margin-top: 0;
  padding-bottom: 0;
  min-height: 92.8vh;
  padding: 0.3rem;
  box-sizing: border-box;
  .van-address-list {
    padding: 0;
    .van-address-item__edit {
      color: #999;
      right: 0;
    }
    .van-tag--danger {
      background-color: #34ad2a;
    }
    .van-button--danger {
      background-color: #34ad2a;
      border: 1px solid #34ad2a;
    }
    /deep/ .van-address-item {
      padding: 0.3rem;
      border-radius: 0.1rem;
      box-sizing: border-box;
      .van-radio__icon--checked .van-icon {
        background-color: #34ad2a;
        border-color: #34ad2a;
      }
      .van-address-item__value{
          padding-right: .7rem;
      }
      .van-address-item__name{
          font-size: .3rem;
          color: #1c1c1c;
      }
      .van-address-item__address{
          font-size: .28rem;
          color: #999;
      }
    }
  }
}
</style>
  